import Head from "next/head";
import { Layout, Typography } from "@douyinfe/semi-ui";
import SideNav from "./side-nav";
import HeaderNav from "./header-nav";
import { Text } from "@nextui-org/react";
import { useEffect, useState } from "react";

export default function Page(props) {
  const { Header, Footer, Sider, Content } = Layout;
  const [footer, setFooter] = useState("Copyright © 2022 Tim-Paik");
  useEffect(() => {
    if (navigator.userAgent.toLowerCase().indexOf("electron") != -1) {
      setFooter("Copyright © 2022 郭少璞 Tim-Paik");
    }
  });
  return (
    <>
      <Layout style={{ height: "100%" }}>
        <Head>
          <title>成绩管理系统</title>
          <meta name="description" content="Generated by create next app" />
          <link rel="icon" href="/favicon.ico" />
          <style>
            {`@media screen and (orientation:portrait){*{display:none}#__next,#notice,.semi-layout,body,html{display:initial!important}}`}
          </style>
        </Head>
        <div id="notice">请使用桌面浏览器横屏查看此页面</div>
        <Header>
          <HeaderNav />
        </Header>
        <Layout>
          <Sider>
            <SideNav page={props.page} />
          </Sider>
          <Content style={{ backgroundColor: "var(--semi-color-bg-0)" }}>
            {props.children}
          </Content>
        </Layout>
        <Footer
          style={{
            display: "flex",
            justifyContent: "space-between",
            padding: "10px 30px",
            borderTop: "1px solid var(--semi-color-border)",
            backgroundColor: "var(--semi-color-bg-0)",
          }}
        >
          <Text>{footer}</Text>
        </Footer>
      </Layout>
    </>
  );
}
